<template>
  <div class="rankingDetail">
    <!-- 图片区域 -->
    <div class="detailImgContainer">
      <img class="detailImg" :src="rankingDetail.coverImgUrl" />
      <!-- 蒙板背景 -->
      <div class="detailImgMask"></div>
    </div>
    <!-- 更新和控制器区域 -->
    <div class="detailControllContainer">
      <div class="detailTitle">{{ rankingDetail.name }}</div>
      <div class="detailUpdate">
        <i class="el-icon-time" />
        <span class="detailUpdateTitle">最近更新:</span>
        <span class="detailUpdateTime">{{ updateTime }}</span>
        <span class="detailUpdateCycle">（{{ updateFrequency }}）</span>
      </div>
      <!-- 控制器 -->
      <Controller :detail="detail" />
    </div>
  </div>
</template>

<script>
import Controller from '@/components/Controller.vue'
import { mapState } from 'vuex'
import dayjs from 'dayjs'

export default {
  name: 'RankingDetail',
  data() {
    return {}
  },
  computed: {
    ...mapState('ranking', ['rankingDetail', 'updateFrequency']),
    // 更新时间普通日期格式
    updateTime() {
      return (
        dayjs(this.rankingDetail.updateTime).format('MM') +
        '月' +
        dayjs(this.rankingDetail.updateTime).format('DD') +
        '日'
      )
    },
    // 要传递到控制器的数据
    detail() {
      return {
        // 榜单id
        id: this.rankingDetail.id,
        // 收藏数
        subscribedCount: this.rankingDetail.subscribedCount,
        // 转发数
        shareCount: this.rankingDetail.shareCount,
        // 评论数
        commentCount: this.rankingDetail.commentCount
      }
    }
  },
  components: {
    Controller
  }
}
</script>

<style lang="less" scoped>
// 榜单基本信息
.rankingDetail {
  display: flex;
  // 图片展示
  .detailImgContainer {
    flex-shrink: 0;
    position: relative;
    .detailImg {
      height: 150px;
      width: 150px;
    }
    .detailImgMask {
      position: absolute;
      top: 0;
      height: 150px;
      width: 150px;
      background: url('../../../../assets/images/coverall.png') left -926.5px no-repeat;
      // background-size: calc(380px * 150 / 220);
      background-size: 274px auto;
    }
  }
  // 榜单更新和控制器
  .detailControllContainer {
    flex-grow: 1;
    margin-left: 30px;
    .detailTitle {
      margin-top: 15px;
      font-size: 20px;
    }
    .detailUpdate {
      margin-top: 10px;
      height: 20px;
      line-height: 20px;
      color: #666;
      .el-icon-time {
        margin-right: 5px;
        font-size: 14px;
      }
      .detailUpdateTime {
        margin: 0 10px;
      }
      .detailUpdateCycle {
        color: #999;
      }
    }
  }
}
</style>
